<template>
	<view class="">
		<form @submit="formSubmit">
			<view class="list">
				<view class="acea-row row-middle row-between item border-b ">
					<view class="label label-m">
						期望区域
					</view>
					<view class="item-r sanjiao-right" @click="goServiceArea">
						<input class="input-r" type="text" placeholder="请选择三个期望区域" placeholder-class="placeholder-class"
							v-model="regionName" disabled />
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b ">
					<view class="label label-m">
						户型
					</view>
					<view class="acea-row row-middle row-right item-r ">
						<picker @change="bindPickerChange" :value="householdListIndex" :range="householdList"
							range-key='describe'>
							<view class="uni-input">
								{{ householdList[householdListIndex] ? householdList[householdListIndex].describe : '请选择户型'}}
							</view>
						</picker>
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b ">
					<view class="label ">
						租金范围
					</view>
					<view class="acea-row row-middle row-right small-ipt">
						<input type="number" placeholder="示例:2000" placeholder-class="placeholder-class"
							v-model="rent1">元—
						<input type="number" placeholder="示例:3000" placeholder-class="placeholder-class"
							v-model="rent2">元
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b ">
					<view class="label label-m">
						面积范围
					</view>
					<view class="acea-row row-middle row-right small-ipt">
						<input type="number" placeholder="示例:20" placeholder-class="placeholder-class" v-model="area1"
							@input="fillTitle">—
						<input type="number" placeholder="示例:30" placeholder-class="placeholder-class" v-model="area2"
							@input="fillTitle">
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b ">
					<view class="label label-m">
						租期
					</view>
					<view class="acea-row row-middle row-right item-r">
						<input class="input-r" placeholder="请输入租期" v-model="reutLongdate" name='reutLongdate'
							placeholder-class="placeholder-class">
						<text>个月</text>
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b ">
					<view class="label">
						电梯
					</view>
					<view class="acea-row row-middle row-right item-r radio-list">
						<view class="acea-row row-middle radio-item" @click="elevator=1">
							<image src="../static/images/radio_on.png" mode="" v-if="elevator == 1"></image>
							<image src="../static/images/radio_no.png" mode="" v-else></image>
							<view class="">有</view>
						</view>
						<view class="acea-row row-middle radio-item margin-l" @click="elevator=0">
							<image src="../static/images/radio_on.png" mode="" v-if="!elevator == 1"></image>
							<image src="../static/images/radio_no.png" mode="" v-else></image>
							<view class="">无</view>
						</view>
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b ">
					<view class="label label-m">
						装修
					</view>
					<view class="acea-row row-middle row-right item-r sanjiao-right">
						<picker @change="renovationChange" :value="renovationIndex" :range="renovationList"
							range-key="name">
							<view :class="renovationName ?'' :'no-data-r'">{{renovationName ? renovationName : '请选择'}}
							</view>
						</picker>
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b ">
					<view class="label label-m">
						房屋类型
					</view>
					<view class="acea-row row-middle row-right item-r sanjiao-right" @click="opendiction(29)">
						<input class="input-r" type="text" placeholder="请选择房屋类型" placeholder-class="placeholder-class"
							v-model="houseType" disabled />
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b ">
					<view class="label">
						入住时间
					</view>
					<view class="acea-row row-middle row-right item-r sanjiao-right">
						<picker mode="date" :value="checkTime" name='checkTime' :start="startDate" :end="endDate"
							@change="checkTimeChange">
							<view class="uni-input" :class="checkTime ? '' : 'no-data-r'">
								{{checkTime ? checkTime+'之前' : '请选择入住时间'}}
							</view>
						</picker>
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b ">
					<view class="label">
						配套设施
					</view>
					<view class="acea-row row-middle row-right item-r sanjiao-right" @click="opendiction(15)">
						<view class="no-data-r" v-if=" sspre.length == 0 || !sspre">请选择配套设施</view>
						<view v-else><span v-for="item in sspre" :key='item.id'> {{item.name}} , </span></view>
					</view>
				</view>
				<!-- 房源标签 -->
				<view class="module border-b">
					<!-- 	<view class="acea-row row-middle row-between">
						<view class="module-title">
							房源标签
						</view>
						<view class="add-advantage red-sanjiao-r" @click="addAd">
							没找到合适的？选择自定义
						</view>
					</view>
					<view class="acea-row advantage-list">
						<view class="itemBox" v-for="(item,index) in advantages" :key="index">
							<icon type="cancel" color="#000" size="14" @click="closeAdvantages(item,index)"
								class="close" />
							<view class="item" :class="advantageIds.indexOf(index)!=-1?'item-on':''"
								@click="advantageChecked(item,index)">{{item}}</view>
						</view>
					</view> -->
					<chooseKeywords title="房源标签" :advantages="advantages" type="1" :typeOn="typeOn"
						:storeAdvantage="storeAdvantage" :advantageIds="advantageIds"
						@storeAdvantage="val=>(storeAdvantage=val)" @advantageIds="val=>(advantageIds=val)"
						@advantages="val=>(advantages=val)" />

				</view>

				<view class="acea-row row-middle row-between item border-b ">
					<view class="label">
						标题
					</view>
					<view class="acea-row row-middle row-right item-r">
						<input class="input-r" type="text" placeholder="请输入标题" placeholder-class="placeholder-class"
							v-model="title" name='title' />
					</view>
				</view>
				<!-- 描述 -->
				<view class="module border-b">
					<view class="module-title">
						描述
					</view>
					<view class="textacea-box">
						<textarea placeholder="请输入描述" v-model="details" :maxlength="maxLength"
							name='details'></textarea>
						<view class="num-text">
							{{details.length}}/{{maxLength}}
						</view>
					</view>
				</view>
				<!-- 联系人 -->
				<view class="acea-row row-middle row-between item border-b ">
					<view class="label label-m">
						联系人
					</view>
					<view class="add-icon" @click="addContact">
						<image src="../static/images/add_icon.png" mode=""></image>
					</view>
				</view>
				<view class="item border-b">
					<!-- <view class="contact-list">
						<view class="acea-row row-middle row-between contact-p" v-for="(item,index) in contactList"
							:key="index">
							<view class="acea-row row-middle row-between contact-r">
								<view class="add-icon" @click="deleteContact(index)">
									<image src="../static/images/sub_icon.png" mode=""></image>
								</view>
								<view class="name" @click="toPage('/pages/releases/addShopContact/addShopContact?info='+JSON.stringify(item) + '&infoIndex='+index)">{{item.username}}</view>
								<view class="gray-text" v-if='item.type == 1'>
									房东
								</view>
								<view class="gray-text" v-if='item.type == 2'>
									老板
								</view>
								<view class="gray-text" v-if='item.type == 3'>
									员工
								</view>
								<view class="gray-text"
									@click="toPage('/pages/releases/addShopContact/addShopContact?info='+JSON.stringify(item) + '&infoIndex='+index)">
									{{item.phone}}
								</view>
							</view>
							<view class="acea-row row-middle check-box" v-if="item.open == 0">
								<image src="../static/images/checkbox_no.png" mode="" @click="openChange(item,1)">
								</image>
								<text>公开</text>
							</view>
							<view class="acea-row row-middle check-box" v-if="item.open == 1">
								<image src="../static/images/checkbox_on.png" mode="" @click="openChange(item,0)">
								</image>
								<text>公开</text>
							</view>
						</view>
					</view> -->

					<chooseContact :list="contactList" :dataform="dataform" @add="d=>contactList.push(d)"
						@del="toDel" />
				</view>
			</view>
			<button class="submit-btn" form-type="submit">
				完成
			</button>
		</form>
		<serviceArea ref="serviceArea" dataType="area" @area="handleArea" />
		<dictionaryType ref="dictionaryType" :gids='gids' @clickOk='clickOk' @popupClose="openPopupShow = false"
			:popupShow='openPopupShow' />
		<addKeyWord ref="addKeyWord" @addConfirm="addConfirm" />
	</view>
</template>

<script>
	import {
		Debounce
	} from '@/utils/validate.js'
	import dictionaryType from '../components/dictionaryType.vue';
	import {
		InformationGroupAdd,
		dictionary,
		GroupDetailApi,
		editPhzasInfo
	} from "@/api/subletOfShop.js"
	import serviceArea from '../components/area.vue';
	import {
		getCategory,
		toPage
	} from '@/filters/commFilter.js'
	import addKeyWord from '../components/addKeyWord/addKeyWord.vue'
	import chooseKeywords from '../components/chooseKeywords.vue'
	import chooseContact from '../components/chooseContact.vue'
	export default {
		props: ['categoryOn', 'editId','typeOn','storeCategory'],
		components: {
			dictionaryType,
			serviceArea,
			addKeyWord,
			chooseKeywords,
			chooseContact
		},
		watch: {
			categoryOn(val) {
				this.fillTitle()
			},
			area2(){
				this.fillTitle()
			}
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				openPopupShow: false,
				checkTime: '', // 入住时间
				houseType: '',
				title: '', //标题，
				reutLongdate: '', //租期
				elevator: 0, //电梯
				contactList: [],
				advantages: [], //店铺优势
				advantageIds: [],
				maxLength: 200,
				details: '', //补充
				rent1: '',
				rent2: '',
				area1: '',
				area2: '',
				sspre: [],
				dataform:{},
				storeAdvantage: [],
				renovationList: [{
					id: 0,
					name: '没有'
				}, {
					id: 1,
					name: '有'
				}, {
					id: 2,
					name: '不限'
				}],
				renovationName: '',
				renovationIndex: 0,
				hopeArea: '', //期望区域id
				regionName: '', //期望区域名称
				householdList: [], //获取户型列表
				householdListIndex: 0, //获取户型标识
				gids: 15
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		watch: {
			details(s) {
				console.log(s)
			}
		},
		mounted() {
			let that = this
			this.getDictionary(28);

			getApp().globalData.initContact()
			if (this.editId) {
				// console.log('edit',this.editId)
				this.getDetail();
			}else{
				this.dataform.city = this.$cityCode ? this.$cityCode[1] : '';
				this.dataform.province = this.$cityCode ? this.$cityCode[0] : '';
				this.dataform.district = this.$cityCode ? this.$cityCode[2] : '';
			}
		},
		methods: {
			toPage,
			//添加配套要求
			addAd() {
				this.$refs.addKeyWord.popupShow = true
			},
			toDel(index, info, callback) {
				if (info) {
					this.contactList.splice(index, 1, info);
				} else {
					this.contactList.splice(index, 1);
				}
				callback && callback();
			},
			toDel(index, info, callback) {
				if (info) {
					this.contactList.splice(index, 1, info);
				} else {
					this.contactList.splice(index, 1);
				}
				callback && callback();
			},
			addConfirm(e) {
				this.advantages = this.advantages.concat(e)
			},
			//去选择期望区域
			goServiceArea() {
				this.$refs.serviceArea.filtrateShow = true;
			},
			//期望区域
			handleArea(areaInfo) {
				this.hopeArea = areaInfo.districtIds;
				this.regionName = areaInfo.regionName;
			},
			//获取户型字典列表
			async getDictionary(gids) {
				try {
					const {
						data
					} = await dictionary({
						gids
					});
					this.householdList = data['28'];
				} catch (e) {
					//TODO handle the exception
				}
			},
			//户型
			bindPickerChange(e) {
				this.householdListIndex = e.detail.value;
			},
			//自动填充标题
			fillTitle() {
				const category = getCategory(this.categoryOn).name
				this.title = this.area1 && this.area2 ? '求租' + this.area1 + '-' + this.area2 + '㎡' + category : this.title
			},
			renovationChange(e) {
				console.log(e)
				this.renovationIndex = e.detail.value
				this.renovationName = this.renovationList[this.renovationIndex].name
			},
			formSubmit: Debounce(function(e) {
				let that = this
				const flag = that.hopeArea.split(',').length > 2
				if (!flag) return that.$util.Tips({
					title: '请选择三个期望区域'
				});
				if (!that.householdList[that.householdListIndex]) return that.$util.Tips({
					title: '请选择户型'
				});
				if (!that.area1 || !that.area2) return that.$util.Tips({
					title: '请输入面积范围'
				});
				// if (!that.rent1 || !that.rent2) return that.$util.Tips({
				// 	title: '请输入租金范围'
				// });
				if (!that.reutLongdate) return that.$util.Tips({
					title: '请输入租期'
				});
				if (!that.houseType) return that.$util.Tips({
					title: '请输入房屋类型'
				});
				if (!that.contactList || that.contactList.length == 0) return that.$util.Tips({
					title: '请输入联系人'
				});
				e.detail.value.rent = that.rent1 + '-' + that.rent2
				e.detail.value.area = that.area1 + '-' + that.area2
				e.detail.value.elevator = that.elevator
				e.detail.value.details = this.details
				e.detail.value.houseType = that.houseType
				e.detail.value.hopeArea = that.hopeArea
				e.detail.value.householdType = that.householdList[that.householdListIndex].name; //户型
				e.detail.value.renovation = that.renovationList[that.renovationIndex].id
				e.detail.value.sspre = that.sspre ? that.sspre.map(item => item.id).join(",") : ''
				e.detail.value.storeAdvantage = that.storeAdvantage.join('/')
				e.detail.value.contacts = that.contactList.map(item => {
					const {
						id,
						type,
						open,
						were
					} = item;
					return {
						contactId: id,
						identity: type,
						open,
						were
					}
				})
				e.detail.value = {
					...that.$location,
					city: this.$cityCode ? this.$cityCode[1] : '',
					province: that.$cityCode ? that.$cityCode[0] : '',
					district: that.$cityCode ? that.$cityCode[2] : '',
					...e.detail.value,
				};
				e.detail.value.storeCategory = getCategory(that.categoryOn).value
				//编辑
				if (this.editId) {
					e.detail.value.askrentId = this.editId;
					editPhzasInfo(e.detail.value).then(res => {
						if (res.code == 200) {

							that.$util.Tips({
								title: '编辑成功'
							}, {
								tab: 2,
								url: '/pages/releases/rentalStores/rentalStores'
							})

							// 
						}
					}).catch(e => this.$util.Tips({
						title: '系统异常'
					}))
				} else {
					InformationGroupAdd(e.detail.value).then(res => {
						if (res.code == 200) {
							that.$util.Tips({
								title: '发布成功'
							}, {
								tab: 2,
								url: '/pages/releases/rentalStores/rentalStores'
							})
							// uni.switchTab({
							// 	url: '/pages/releaseInformation/releaseInformation'
							// })
						}
					})
				}
			}),
			openChange(row, index) {
				row.open = index
			},
			deleteContact(index) {
				this.contactList.splice(index, 1)
			},
			opendiction(gids) {
				this.gids = gids
				this.openPopupShow = true
			},
			clickOk(val) {
				console.log(val)
				if (this.gids == 15) {
					this.sspre = val
				} else if (this.gids == 29) {
					this.houseType = (
						val.map(item => {
							return item.name
						})
					).join(',')
				}
				this.openPopupShow = false
			},
			checkTimeChange(e) {
				this.checkTime = e.detail.value;
			},
			//删除标签
			closeAdvantages(item, index) {
				this.advantages.splice(index, 1)
				if (this.advantageIds.indexOf(index) != -1) {
					let idx = this.advantageIds.indexOf(index)
					this.advantageIds.splice(idx, 1);
					this.storeAdvantage.splice(index, 1)
				}
			},
			advantageChecked(item, index) {
				if (this.advantageIds.indexOf(index) != -1) {
					let idx = this.advantageIds.indexOf(index)
					this.advantageIds.splice(idx, 1);
					this.storeAdvantage.splice(item, 1)
				} else {
					this.advantageIds.push(index);
					this.storeAdvantage.push(item)
				}
			},
			addContact() {
				uni.navigateTo({
					url: '/pages/releases/addShopContact/addShopContact'
				})
			},

			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			getDetail() {
				GroupDetailApi(this.editId,{
					storeCategory:this.storeCategory
				}).then(res => {
					console.log('editShop', res)
					let d = res.data
					this.dataform = res.data
					if (res.code == 200) {
						getApp().globalData.fbDeal(d, this)
						console.log(this.sspre)

						// this.supportingFacility = this.sspre
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	@import '/static/css/releaseForm.css';
</style>